<template>
  <ry-modal title="申请项目" v-model="visible" destroyOnClose :maskClosable="false"
    :confirmLoading="confirmLoading" @ok="applyProjectOk">
    <a-spin :spinning="confirmLoading">
      <a-form-model :model="form" :rules="rules" v-bind="modelConfig">
        <a-row :gutter="[24,0]">
          <a-col :span="24" style="font-weight: 600;margin-bottom: 10px;margin-left: 20px">
            <span style="background-color:#3acaca;margin-right: 4px">&nbsp</span>项目信息
          </a-col>
          <a-col :span="24">
            <a-form-model-item :labelCol="{span:2}" :wrapperCol="{span:22}" prop="applyProject">
              <a-row style="margin-left: 30px;margin-top: 10px;">
                <a-radio-group v-model="form.applyProject"  style="width: 100%;" @change="onChangeProjects">
                  <a-col :span="8" v-for="item in $getDict('APPLY_PROJECT')" :key="item.value" style="margin-bottom: 20px;">
                    <a-radio :value="item.value" style="color: #28a8a7">{{ item.label }}</a-radio>
                  </a-col>
                </a-radio-group>
              </a-row>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24,0]">
          <a-col :span="24" style="font-weight: 600;margin-bottom: 10px;margin-left: 20px;margin-top: 10px">
            <span style="background-color:#3acaca;margin-right: 4px">&nbsp</span>补充信息
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="数量" prop="projectNumber">
              <a-input-number v-model="form.projectNumber" :min="1" :step="1" style="width: 30%;" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="实验室" prop="accountSource">
              <a-input v-model="form.accountSource" placeholder="请输入对应实验室"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注">
              <a-input v-model="form.remake" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </ry-modal>
</template>

<script>
import { CommonModal } from '@/ryweb'
export default {
  name: '',
  mixins: [CommonModal],
  components: { },
  props: ['url', 'id', 'whetherVip'],
  data () {
    return {
      visible: false,
      visibleMemberCard: false,
      type: '1',
      form: {},
      modelConfig: {
        ref: 'ruleForm',
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      rules: {
        applyProject: [{
          required: true,
          message: '请输入选择项目',
          trigger: 'change'
        }],
        accountSource: [{
          required: true,
          message: '请输入对应实验室',
          trigger: 'blur'
        }],
        projectNumber: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
        remake: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
      }
    }
  },
  methods: {
    add (value) {
      this.form = {
        accountId: this.id,
        projectNumber: 1
      }
      this.visible = true
      this.visibleMemberCard = false
      this.type = '1'
    },
    edit (value) {
      this.form = []
      this.visible = true
      this.visibleMemberCard = true
      this.form = value
      this.type = '2'
    },
    applyProjectOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let url = this.url.add
          if (this.type === '2') {
            url = this.url.edit
          }
          this.$post(url, this.form).then(res => {
            if (res.code === 200) {
              this.$message.success('申请成功')
              this.visible = false
              this.$emit('ModalOk')
            }
          })
        } else {
          return false
        }
      })
    },
    onChangeProjects (checkedValues) {
      console.log('checkedValues', checkedValues)
    }
  },
  created () {
  }
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0rem;
}
.ry-modal .body-container .ant-form-item-control {
  line-height: 0rem;
}
</style>
